<template>
	<view ref="container">
		<view class="tablemargin">
			<view class="bottom tabletou">
				<checkbox :checked="seletedAll" @tap="_seletedAll" class="hanlan">全选</checkbox>
				<view class="hanlan">兑换卡号 </view>
				<view class="hanlan">兑换时间 </view>
				<view class="hanlan">兑换状态 </view>
				<view class="hanlan">操作 </view>
			</view>
			<view class="top tablewei" v-if="collectProductList.length > 0">
				<checkbox-group @change="seletedStatus" checked>
					<view v-for="(item,collectProductListIndex) in collectProductList" :key="collectProductListIndex" class="tableweih">
						<checkbox :value="item.id" :checked="checkList.includes(String(item.id))" class="hanlan1"></checkbox>
						<view class="hanlan1"> {{item.cardNum}}</view>
						<view class="hanlan1"> {{item.createTime}}</view>
						<view class="hanlan1" v-if="item.exchangeStatus===0"> 未兑换</view>
						<view class="hanlan1" v-if="item.exchangeStatus===1"> 已兑换</view>
						<view class="hanlanz" v-if="userInfo.agent===1"  @tap="zhuanrang(item.id)">转让</view>
                        <view style="clear:both"></view>
					</view>
				</checkbox-group>
			</view>
		</view>

		<view class="prompt">
			<view class="prompt-box" v-if="isHidden">
				<view class="prompt-content contentFontColor">
					<view class="prompt-title">转让用户手机号</view>
				
				  	  <input class="prompt-input" type="text" @blur="_judge" :value="phone" placeholder="请输入" />
				
					<view class="prompt-btn-group">
						<view class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">取消</view>
						<view class="btn-item prompt-certain-btn" @tap="_confirm">确定</view>
					</view>
				</view>
			</view>
		</view>


		<Loading :loaded="loadend" :loading="loading"></Loading>
		<view style="clear:both"></view>
		<view class="piliangzr" @tap="zhuanrangp()" v-if="userInfo.agent===1">批量转让</view>

	
	</view>
</template>
<script>
	import {
	  mapGetters,
	} from "vuex";
	import Recommend from "@/components/Recommend";
	import {
		storeCardList,
		agentCardList,
		getCollectDel,
		transfer 
	} from "@/api/user";
	import Loading from "@/components/Loading";
	export default {
		name: "GoodsFoot",
		components: {
			Recommend,
			Loading
		},
		props: {},
		data: function() {
			return {
				isHidden: false,
				seletedAll: false,
		
				checkList: [], //选中值

				page: 1,
				limit: 20,
				type: 'foot',
				collectProductList: [],
				loadTitle: "",
				loading: false,
				loadend: false,
				phone: '',
				id: '',
			};
		},
		mounted: function() {
			this.get_user_collect_product();
		},
		onReachBottom() {
			!this.loading && this.get_user_collect_product();
		},
		computed: mapGetters(["userInfo"]),
		methods: {
	// uni.showModal({
	//   title: '提示',
	//   content: '非代理商用户、无法转让兑换卡。',
	// //content: '改目标手机号还不是商城用户，需要注册商城',
	//   success: function (res) {
	//     if (res.confirm) {
	//       console.log('用户点击确定');
	//     } else if (res.cancel) {
	//       console.log('用户点击取消');
	//     }
	//   }
	// });
			zhuanrang(id) {
					this.isHidden = true
		            this.id=id
			
			},
			zhuanrangp() {
				this.isHidden = true
				this.id=this.checkList.join()
			},
			seletedStatus(e) {
					
				this.checkList = e.detail.value
				console.log(this.checkList)
				if (this.checkList.length === this.collectProductList.length) {
					this.seletedAll = true
				}
			},
			_seletedAll() {
				if (!this.seletedAll) {
					this.seletedAll = true
					this.collectProductList.map(item => {
					
						this.checkList.push(item.id)
					})
					
					
					
					console.log(this.checkList)
					console.log('true')
				} else {
					this.seletedAll = false
					this.checkList = []
					console.log('false')
				}
			},
			_judge(e) {
				this.phone=e.detail.value
			},
			_cancel() {
				this.isHidden = false
			},
			_confirm() {
			  if(this.phone===''){
				  uni.showToast({
				  	title:"请输入手机号",
				  	icon: "none",
				  	duration: 2000,
				  	complete: () => {
				  					
				  	}
				  });
				  return
			  }
				transfer(this.phone,this.id, this.userInfo.uid).then(res => {
					if(res.data.succ){
						uni.showToast({
							title: "转让成功",
							icon: "success",
							duration: 2000,
							complete: () => {
							 this.isHidden = false	
							}
						});
					}else{
						uni.showToast({
							title:res.data.msg,
							icon: "none",
							duration: 2000,
							complete: () => {
											
							}
						});
					}
				
				});
			},
			get_user_collect_product: function() {
				let that = this;
				if (that.loading) return; //阻止下次请求（false可以进行请求）；
				if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
				that.loading = true;			
				 if(that.userInfo.agent===2){
					storeCardList(that.page, that.limit, that.userInfo.uid).then(res => {
						that.loading = false;
						//apply();js将一个数组插入另一个数组;
						that.collectProductList.push.apply(that.collectProductList, res.data.list);
						that.loadend = res.data.list.length < that.limit; //判断所有数据是否加载完成；
						that.page = that.page + 1;
					});
				}else if(that.userInfo.agent===1){
					agentCardList(that.page, that.limit, that.userInfo.uid).then(res => {
						that.loading = false;
						//apply();js将一个数组插入另一个数组;
						that.collectProductList.push.apply(that.collectProductList, res.data.list);
						that.loadend = res.data.list.length < that.limit; //判断所有数据是否加载完成；
						that.page = that.page + 1;
					});
				}
			
			},
	
		}
	};
</script>
<style scoped>
	.tablemargin {
		margin: 0 2%;
		background: #fff;
		font-size: 24rpx;
     
	}

	.tabletou {
		background: rgb(202, 69, 59);
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.tablewei {
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		color: #666666;
	}

	.tableweih {
		background: #fff;
		border-bottom: 1rpx solid rgb(215, 218, 211);
	}

	.hanlan {
		width: 20%;
		display: inline-block;
		text-align: center;
	
	
	}
.hanlan1 {
		width: 20%;
		float: left;
		text-align: center;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
       
	}
	.hanlanz {
		width: 20%;
		float: left;
		text-align: center;
		color: royalblue
	}

	.prompt-box {
		position: absolute;
		left: 0;
		top: -140rpx;
		width: 100%;
		height: 120%;
		z-index: 11;
		background: rgba(0, 0, 0, .6);
		font-size: 30rpx;
	}

	.prompt-content {
		position: absolute;
		left: 50%;
		top: 600rpx;
		width: 80%;
		max-width: 600rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		box-sizing: bordre-box;
		transform: translate(-50%, -50%);
		overflow: hidden;
		background: #fff;
	}

	.prompt-title {
		width: 100%;
		padding: 30rpx 0;
		text-align: center;
		font-size: 40rpx;
		color: #000000;
		/* border-bottom: 2rpx solid gray; */
	}

	.prompt-input {
		margin: auto;
		margin-top: 10rpx;
		margin-bottom: 70rpx;
		padding: 4rpx 4rpx;
		width: 70%;
		height: 40rpx;
		border: none!important;
		font-size: 24rpx;
	}

	.prompt-btn-group {
		display: flex;
	}

	.btn-item {
		width: 25%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		background-color: white;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.prompt-certain-btn {
		color: royalblue;
		text-align: center;
		width:50%
	}

	.prompt-cancel-btn {
		border: none;
		text-align: center;
		width:50%
	}

	.contentFontColor {
		color: #868686;
	}

	.prompt-input {
		margin: auto;
		margin-top: 10rpx;
		margin-bottom: 70rpx;
		padding: 4rpx 0;
		width: 60%;
		height: 30rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	.piliangzr {
		background: royalblue;
		margin: 20rpx auto;
		border-radius: 40rpx;
		text-align: center;
		color: #fff;
		padding: 20rpx 15rpx;
		width: 30%;
		font-size: 26rpx;
	}
</style>
